<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Lesson Add</title>
    <style>
        body {
            background-color: #f0f0f0; /* 设置浅色背景 */
            font-family: Arial, sans-serif;
        }

        h1 {
            color: #333; /* 设置标题颜色 */
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            font-weight: bold;
            color: #555; /* 设置标签颜色 */
        }

        input[type="text"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        button {
            background-color: #007bff; /* 设置按钮背景颜色 */
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>学生添加</h1>
    
    <!-- 新的表单部分开始 -->
    <form th:action="@{/manong/gotoAddStudent}" method="post">
		<label th:text="姓名"></label>
		<input name="name" type="text"><br><br>
		
		<label th:text="性别"></label>
		<input name="sex" type="text"><br><br>
		
		<label th:text="密码"></label>
		<input name="password" type="text" ><br><br>
		
		<label th:text="身份证号"></label>
		<input name="id" type="text" ><br><br>
	
		<label th:text="所属学院"></label>
		<input name="college" type="text" ><br><br>

		<label th:text="专业"></label>
		<input name="speciality" type="text" ><br><br>
	
  		<label th:text="班级"></label>
		<input name="clase" type="text"><br><br>
  		<label th:text="年级"></label>
		<input name="year" type="text"><br><br>

  		<label th:text="籍贯"></label>
		<input name="nativePlace" type="text" ><br><br>

  		<label th:text="电话号码"></label>
		<input name="phone" type="text"><br><br>
  		<label th:text="密保"></label>
		<input name="confident" type="text" ><br><br>

        <button type="submit">添加</button>
    </form>
    <!-- 新的表单部分结束 -->

    <p th:text="${msg}"></p >

    <!-- 添加动效示例 -->
    <script>
        // 当表单字段获得焦点时改变边框颜色
        const formInputs = document.querySelectorAll('input[type="text"]');
        formInputs.forEach(input => {
            input.addEventListener('focus', () => {
                input.style.border = '1px solid #007bff'; // 改变边框颜色为蓝色
            });

            input.addEventListener('blur', () => {
                input.style.border = '1px solid #ccc'; // 恢复默认边框颜色
            });
        });
    </script>
</body>
</html>